<template>
  <div class="space-login-wrap">
    <!-- 太空背景 -->
    <div class="space-bg">
      <div class="stars-layer"></div>
      <div class="stars-layer stars-layer-2"></div>
      <div class="nebula nebula-1"></div>
      <div class="nebula nebula-2"></div>
      <div class="nebula nebula-3"></div>
      
      <!-- 恒星系统1 -->
      <div class="star-system star-system-1">
        <div class="star star-center-1"></div>
        <div class="orbit orbit-1">
          <div class="orbiting-planet planet-orbiting-1"></div>
        </div>
        <div class="orbit orbit-2">
          <div class="orbiting-planet planet-orbiting-2"></div>
        </div>
      </div>
      
      <!-- 恒星系统2 -->
      <div class="star-system star-system-2">
        <div class="star star-center-2"></div>
        <div class="orbit orbit-3">
          <div class="orbiting-planet planet-orbiting-3"></div>
        </div>
        <div class="orbit orbit-4">
          <div class="orbiting-planet planet-orbiting-4"></div>
        </div>
        <div class="orbit orbit-5">
          <div class="orbiting-planet planet-orbiting-5"></div>
        </div>
      </div>
      
      <div class="planet planet-1"></div>
      <div class="planet planet-2"></div>
      <div class="planet planet-3"></div>
      <div class="asteroids">
        <div class="asteroid asteroid-1"></div>
        <div class="asteroid asteroid-2"></div>
        <div class="asteroid asteroid-3"></div>
        <div class="asteroid asteroid-4"></div>
        <div class="asteroid asteroid-5"></div>
      </div>
      <div class="space-grid"></div>
      <div class="energy-waves">
        <div class="wave wave-1"></div>
        <div class="wave wave-2"></div>
        <div class="wave wave-3"></div>
      </div>
      <div class="particle-field"></div>
      <div class="galaxy-spiral"></div>
      
      <!-- 黑洞1 -->
      <div class="black-hole black-hole-1">
        <div class="accretion-disk accretion-disk-1"></div>
        <div class="event-horizon event-horizon-1"></div>
        <div class="lens-distortion lens-distortion-1"></div>
      </div>
      
      <!-- 黑洞2 -->
      <div class="black-hole black-hole-2">
        <div class="accretion-disk accretion-disk-2"></div>
        <div class="event-horizon event-horizon-2"></div>
        <div class="lens-distortion lens-distortion-2"></div>
      </div>
      
      <!-- 黑洞3 -->
      <div class="black-hole black-hole-3">
        <div class="accretion-disk accretion-disk-3"></div>
        <div class="event-horizon event-horizon-3"></div>
        <div class="lens-distortion lens-distortion-3"></div>
      </div>
    </div>

    <div class="login-container">
      <div class="login-panel">
        <div class="panel-header">
          <div class="logo-section">
            <h2>ERP管理系统</h2>
            <p class="subtitle">欢迎来到未来</p>
          </div>
        </div>

        <el-form
          ref="loginFormRef"
          :model="loginForm"
          :rules="loginRules"
          class="login-form"
          @submit.prevent="handleLogin"
        >
          <el-form-item prop="username">
            <div class="input-wrapper">
              <el-input
                v-model="loginForm.username"
                placeholder="请输入用户名"
                size="large"
                prefix-icon="User"
                class="space-input"
              />
            </div>
          </el-form-item>

          <el-form-item prop="password">
            <div class="input-wrapper">
              <el-input
                v-model="loginForm.password"
                type="password"
                placeholder="请输入密码"
                size="large"
                prefix-icon="Lock"
                show-password
                @keyup.enter="handleLogin"
                class="space-input"
              />
            </div>
          </el-form-item>

          <el-form-item>
            <div class="form-options">
              <el-checkbox v-model="loginForm.rememberMe">记住我</el-checkbox>
              <el-link type="primary" :underline="false" @click="showForgotPassword" class="forgot-link">
                忘记密码？
              </el-link>
            </div>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              size="large"
              class="space-btn"
              :loading="loading"
              @click="handleLogin"
              style="width: 100%"
            >
              <span v-if="!loading">登录</span>
              <span v-else>正在连接...</span>
            </el-button>
          </el-form-item>
        </el-form>

        <div class="panel-footer">
          <p>默认账号：<strong>admin</strong> / <strong>123456</strong></p>
        </div>
      </div>
    </div>

    <!-- 忘记密码对话框 -->
    <ForgotPasswordDialog
      v-model="forgotPasswordVisible"
      @success="handleResetSuccess"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/user'
import ForgotPasswordDialog from './components/ForgotPasswordDialog.vue'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

const emit = defineEmits(['login'])

const loginFormRef = ref()
const loading = ref(false)
const forgotPasswordVisible = ref(false)

const loginForm = reactive({
  username: 'admin',
  password: '123456',
  rememberMe: false
})

const loginRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
  ]
}

const handleLogin = async () => {
  if (!loginFormRef.value) return

  try {
    await loginFormRef.value.validate()
    loading.value = true

    const response = await userStore.login(loginForm)

    if (response.code === 200) {
      ElMessage.success(response.msg || '登录成功')
      emit('login', response)
      
      const redirect = route.query.redirect
      if (redirect && redirect !== '/login') {
        router.push(decodeURIComponent(redirect))
      } else {
        router.push('/dashboard')
      }
    } else {
      ElMessage.error(response.msg || '登录失败')
    }
  } catch (error) {
    console.error('登录失败:', error)
    ElMessage.error(error.message || '网络请求失败，请重试')
  } finally {
    loading.value = false
  }
}

const showForgotPassword = () => {
  forgotPasswordVisible.value = true
}

const handleResetSuccess = () => {
  forgotPasswordVisible.value = false
}

// 创建动态星星和粒子
onMounted(() => {
  createStars()
  createParticles()
})

const createStars = () => {
  const starsLayer = document.querySelector('.stars-layer')
  const starsLayer2 = document.querySelector('.stars-layer-2')
  
  if (!starsLayer || !starsLayer2) return
  
  const starsCount = 150
  
  for (let i = 0; i < starsCount; i++) {
    const star = document.createElement('div')
    star.className = 'star'
    star.style.left = Math.random() * 100 + '%'
    star.style.top = Math.random() * 100 + '%'
    star.style.animationDelay = Math.random() * 3 + 's'
    star.style.animationDuration = (Math.random() * 3 + 2) + 's'
    starsLayer.appendChild(star)
  }
  
  for (let i = 0; i < starsCount / 2; i++) {
    const star = document.createElement('div')
    star.className = 'star star-large'
    star.style.left = Math.random() * 100 + '%'
    star.style.top = Math.random() * 100 + '%'
    star.style.animationDelay = Math.random() * 3 + 's'
    star.style.animationDuration = (Math.random() * 3 + 2) + 's'
    starsLayer2.appendChild(star)
  }
}

const createParticles = () => {
  const particleField = document.querySelector('.particle-field')
  if (!particleField) return
  
  const particleCount = 50
  
  for (let i = 0; i < particleCount; i++) {
    const particle = document.createElement('div')
    particle.className = 'particle'
    particle.style.left = Math.random() * 100 + '%'
    particle.style.top = Math.random() * 100 + '%'
    particle.style.animationDelay = Math.random() * 5 + 's'
    particle.style.animationDuration = (Math.random() * 10 + 10) + 's'
    particleField.appendChild(particle)
  }
}
</script>

<style scoped>
.space-login-wrap {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: 
    linear-gradient(135deg, rgba(10, 14, 39, 1) 0%, rgba(15, 23, 42, 1) 50%, rgba(10, 14, 39, 1) 100%),
    radial-gradient(circle at 0% 0%, rgba(64, 158, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(138, 43, 226, 0.1) 0%, transparent 50%);
  background-size: 200% 200%, 100% 100%, 100% 100%;
  animation: wrapBackgroundShift 40s ease-in-out infinite;
  overflow: hidden;
}

@keyframes wrapBackgroundShift {
  0%, 100% {
    background-position: 
      0% 0%,
      0% 0%,
      100% 100%;
    filter: hue-rotate(0deg);
  }
  33% {
    background-position: 
      50% 50%,
      20% 30%,
      80% 70%;
    filter: hue-rotate(15deg);
  }
  66% {
    background-position: 
      100% 100%,
      40% 60%,
      60% 40%;
    filter: hue-rotate(30deg);
  }
}

.space-bg {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(64, 158, 255, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(138, 43, 226, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(236, 72, 153, 0.1) 0%, transparent 50%),
    #0a0e27;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  animation: backgroundShift 30s ease-in-out infinite;
  overflow: hidden;
}

@keyframes backgroundShift {
  0%, 100% {
    background-position: 
      0% 0%,
      100% 100%,
      50% 50%,
      0 0;
    filter: hue-rotate(0deg) brightness(1);
  }
  25% {
    background-position: 
      20% 30%,
      80% 70%,
      40% 60%,
      0 0;
    filter: hue-rotate(10deg) brightness(1.05);
  }
  50% {
    background-position: 
      40% 60%,
      60% 40%,
      60% 40%,
      0 0;
    filter: hue-rotate(20deg) brightness(1.1);
  }
  75% {
    background-position: 
      60% 20%,
      40% 80%,
      30% 70%,
      0 0;
    filter: hue-rotate(10deg) brightness(1.05);
  }
}

/* 星空层 */
.stars-layer {
  position: absolute;
  inset: 0;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
  animation: twinkle 3s ease-in-out infinite;
}

.star-large {
  width: 3px;
  height: 3px;
  box-shadow: 0 0 6px rgba(255, 255, 255, 1);
}

.stars-layer-2 {
  opacity: 0.6;
}

@keyframes twinkle {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* 星云 */
.nebula {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 1;
}

.nebula-1 {
  top: 10%;
  left: 5%;
  width: 450px;
  height: 350px;
  background: radial-gradient(ellipse at center, 
    rgba(138, 43, 226, 0.5) 0%, 
    rgba(75, 0, 130, 0.4) 40%,
    transparent 70%);
  animation: nebulaFloat1 25s ease-in-out infinite;
}

.nebula-2 {
  bottom: 10%;
  right: 5%;
  width: 500px;
  height: 400px;
  background: radial-gradient(ellipse at center, 
    rgba(64, 158, 255, 0.4) 0%, 
    rgba(29, 78, 216, 0.3) 40%,
    transparent 70%);
  animation: nebulaFloat2 30s ease-in-out infinite;
}

.nebula-3 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 500px;
  background: radial-gradient(ellipse at center, 
    rgba(236, 72, 153, 0.3) 0%, 
    rgba(190, 24, 93, 0.2) 40%,
    transparent 70%);
  animation: nebulaFloat3 35s ease-in-out infinite;
}

@keyframes nebulaFloat1 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(50px, -50px) scale(1.15);
  }
}

@keyframes nebulaFloat2 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-40px, 40px) scale(1.2);
  }
}

@keyframes nebulaFloat3 {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(calc(-50% + 60px), calc(-50% - 60px)) scale(1.1);
  }
}

/* 恒星系统 */
.star-system {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}

.star-system-1 {
  top: 25%;
  left: 75%;
  width: 200px;
  height: 200px;
}

.star-system-2 {
  bottom: 20%;
  left: 8%;
  width: 250px;
  height: 250px;
}

.star {
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.star-center-1 {
  width: 30px;
  height: 30px;
  background: radial-gradient(circle, #fff 0%, #ffeb3b 50%, #ff9800 100%);
  box-shadow: 
    0 0 40px rgba(255, 235, 59, 0.8),
    0 0 80px rgba(255, 152, 0, 0.6),
    0 0 120px rgba(255, 152, 0, 0.4);
  animation: starPulse 3s ease-in-out infinite;
}

.star-center-2 {
  width: 25px;
  height: 25px;
  background: radial-gradient(circle, #fff 0%, #64b5f6 50%, #1976d2 100%);
  box-shadow: 
    0 0 35px rgba(100, 181, 246, 0.8),
    0 0 70px rgba(25, 118, 210, 0.6),
    0 0 100px rgba(25, 118, 210, 0.4);
  animation: starPulse 4s ease-in-out infinite;
}

@keyframes starPulse {
  0%, 100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.2);
  }
}

/* 轨道 */
.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(64, 158, 255, 0.1);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.orbit-1 {
  width: 120px;
  height: 120px;
  animation: orbitRotate1 15s linear infinite;
}

.orbit-2 {
  width: 180px;
  height: 180px;
  animation: orbitRotate2 20s linear infinite;
}

.orbit-3 {
  width: 100px;
  height: 100px;
  animation: orbitRotate3 12s linear infinite;
}

.orbit-4 {
  width: 150px;
  height: 150px;
  animation: orbitRotate4 18s linear infinite;
}

.orbit-5 {
  width: 220px;
  height: 220px;
  animation: orbitRotate5 25s linear infinite;
}

@keyframes orbitRotate1 {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes orbitRotate2 {
  from { transform: translate(-50%, -50%) rotate(360deg); }
  to { transform: translate(-50%, -50%) rotate(0deg); }
}

@keyframes orbitRotate3 {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes orbitRotate4 {
  from { transform: translate(-50%, -50%) rotate(360deg); }
  to { transform: translate(-50%, -50%) rotate(0deg); }
}

@keyframes orbitRotate5 {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 轨道行星 */
.orbiting-planet {
  position: absolute;
  border-radius: 50%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.planet-orbiting-1 {
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, #e57373 0%, #ef5350 100%);
  box-shadow: 0 0 10px rgba(239, 83, 80, 0.6);
}

.planet-orbiting-2 {
  width: 10px;
  height: 10px;
  background: linear-gradient(135deg, #81c784 0%, #66bb6a 100%);
  box-shadow: 0 0 8px rgba(102, 187, 106, 0.5);
}

.planet-orbiting-3 {
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, #ba68c8 0%, #ab47bc 100%);
  box-shadow: 0 0 8px rgba(171, 71, 188, 0.5);
}

.planet-orbiting-4 {
  width: 14px;
  height: 14px;
  background: linear-gradient(135deg, #64b5f6 0%, #42a5f5 100%);
  box-shadow: 0 0 12px rgba(66, 165, 245, 0.6);
}

.planet-orbiting-5 {
  width: 10px;
  height: 10px;
  background: linear-gradient(135deg, #ffd54f 0%, #ffca28 100%);
  box-shadow: 0 0 10px rgba(255, 202, 40, 0.6);
}

/* 行星 */
.planet {
  position: absolute;
  border-radius: 50%;
  box-shadow: inset -20px -20px 0 rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.planet-1 {
  width: 140px;
  height: 140px;
  background: linear-gradient(135deg, #4a90e2 0%, #357abd 50%, #2c5f8d 100%);
  top: 12%;
  right: 12%;
  animation: planetRotate1 35s linear infinite;
  box-shadow: 
    inset -20px -20px 0 rgba(0, 0, 0, 0.3),
    0 0 30px rgba(74, 144, 226, 0.5);
}

.planet-2 {
  width: 90px;
  height: 90px;
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 50%, #c44569 100%);
  bottom: 15%;
  left: 15%;
  animation: planetRotate2 25s linear infinite reverse;
  box-shadow: 
    inset -20px -20px 0 rgba(0, 0, 0, 0.3),
    0 0 30px rgba(255, 107, 107, 0.5);
}

.planet-3 {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #6bcf7f 0%, #4caf50 50%, #2e7d32 100%);
  top: 70%;
  right: 25%;
  animation: planetRotate3 20s linear infinite;
  box-shadow: 
    inset -10px -10px 0 rgba(0, 0, 0, 0.3),
    0 0 25px rgba(107, 207, 127, 0.4);
}

@keyframes planetRotate1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes planetRotate2 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

@keyframes planetRotate3 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 小行星 */
.asteroids {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.asteroid {
  position: absolute;
  background: #fff;
  border-radius: 20%;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}

.asteroid-1 {
  width: 5px;
  height: 5px;
  top: 25%;
  left: 85%;
  animation: asteroidMove1 16s linear infinite;
}

.asteroid-2 {
  width: 4px;
  height: 4px;
  top: 55%;
  left: 8%;
  animation: asteroidMove2 20s linear infinite;
}

.asteroid-3 {
  width: 3px;
  height: 3px;
  top: 75%;
  left: 55%;
  animation: asteroidMove3 14s linear infinite;
}

.asteroid-4 {
  width: 4px;
  height: 4px;
  top: 40%;
  left: 70%;
  animation: asteroidMove4 18s linear infinite;
}

.asteroid-5 {
  width: 3px;
  height: 3px;
  top: 85%;
  left: 30%;
  animation: asteroidMove5 22s linear infinite;
}

@keyframes asteroidMove1 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100vw, 110vh) rotate(360deg);
  }
}

@keyframes asteroidMove2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(110vw, -100vh) rotate(-360deg);
  }
}

@keyframes asteroidMove3 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-85vw, -90vh) rotate(360deg);
  }
}

@keyframes asteroidMove4 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-90vw, 95vh) rotate(-360deg);
  }
}

@keyframes asteroidMove5 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(95vw, -110vh) rotate(360deg);
  }
}

/* 网格背景 */
.space-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(64, 158, 255, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(64, 158, 255, 0.15) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.25;
  animation: gridMove 25s linear infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes gridMove {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(60px, 60px);
  }
}

/* 能源波纹 */
.energy-waves {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.wave {
  position: absolute;
  border: 2px solid rgba(64, 158, 255, 0.3);
  border-radius: 50%;
  opacity: 0;
}

.wave-1 {
  width: 200px;
  height: 200px;
  top: 20%;
  left: 30%;
  animation: wavePulse1 8s ease-in-out infinite;
}

.wave-2 {
  width: 300px;
  height: 300px;
  bottom: 30%;
  right: 25%;
  animation: wavePulse2 10s ease-in-out infinite;
  animation-delay: 2s;
}

.wave-3 {
  width: 250px;
  height: 250px;
  top: 60%;
  left: 15%;
  animation: wavePulse3 12s ease-in-out infinite;
  animation-delay: 4s;
}

@keyframes wavePulse1 {
  0% {
    transform: scale(0.5);
    opacity: 0.8;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

@keyframes wavePulse2 {
  0% {
    transform: scale(0.5);
    opacity: 0.6;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

@keyframes wavePulse3 {
  0% {
    transform: scale(0.5);
    opacity: 0.7;
  }
  100% {
    transform: scale(3.5);
    opacity: 0;
  }
}

/* 粒子场 */
.particle-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
  animation: particleFloat 15s ease-in-out infinite;
}

@keyframes particleFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.3;
  }
  25% {
    transform: translate(20px, -30px) scale(1.2);
    opacity: 1;
  }
  50% {
    transform: translate(-15px, -50px) scale(0.8);
    opacity: 0.5;
  }
  75% {
    transform: translate(30px, -20px) scale(1.1);
    opacity: 0.9;
  }
}

/* 银河螺旋效果 */
.galaxy-spiral {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0.2;
  z-index: 1;
}

.galaxy-spiral::before,
.galaxy-spiral::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  box-shadow: 
    0 0 20px 0 rgba(64, 158, 255, 0.4),
    0 0 40px 0 rgba(64, 158, 255, 0.3),
    0 0 60px 0 rgba(64, 158, 255, 0.2),
    0 0 80px 0 rgba(64, 158, 255, 0.1);
  border-radius: 50%;
  transform-origin: center;
}

.galaxy-spiral::before {
  width: 1px;
  height: 1px;
  background: radial-gradient(circle, rgba(64, 158, 255, 0.8), transparent);
  animation: spiralRotate1 25s linear infinite;
  box-shadow: 
    300px 0 0 0 rgba(64, 158, 255, 0.6),
    250px 0 0 0 rgba(64, 158, 255, 0.5),
    200px 0 0 0 rgba(64, 158, 255, 0.4),
    150px 0 0 0 rgba(64, 158, 255, 0.3),
    100px 0 0 0 rgba(64, 158, 255, 0.2),
    50px 0 0 0 rgba(64, 158, 255, 0.1);
}

.galaxy-spiral::after {
  width: 1px;
  height: 1px;
  background: radial-gradient(circle, rgba(138, 43, 226, 0.8), transparent);
  animation: spiralRotate2 35s linear infinite reverse;
  box-shadow: 
    -350px 0 0 0 rgba(138, 43, 226, 0.6),
    -280px 0 0 0 rgba(138, 43, 226, 0.5),
    -210px 0 0 0 rgba(138, 43, 226, 0.4),
    -140px 0 0 0 rgba(138, 43, 226, 0.3),
    -70px 0 0 0 rgba(138, 43, 226, 0.2);
}

@keyframes spiralRotate1 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes spiralRotate2 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* 黑洞效果 */
.black-hole {
  position: absolute;
  pointer-events: none;
  z-index: 3;
}

.black-hole-1 {
  top: 5%;
  left: 45%;
  width: 180px;
  height: 180px;
  animation: blackHoleFloat1 20s ease-in-out infinite;
}

.black-hole-2 {
  top: 45%;
  right: 5%;
  width: 150px;
  height: 150px;
  animation: blackHoleFloat2 25s ease-in-out infinite;
}

.black-hole-3 {
  bottom: 5%;
  left: 55%;
  width: 200px;
  height: 200px;
  animation: blackHoleFloat3 30s ease-in-out infinite;
}

@keyframes blackHoleFloat1 {
  0%, 100% {
    transform: translateX(-50%) translateY(0) scale(1);
  }
  50% {
    transform: translateX(-50%) translateY(20px) scale(1.05);
  }
}

@keyframes blackHoleFloat2 {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-25px) scale(1.05);
  }
}

@keyframes blackHoleFloat3 {
  0%, 100% {
    transform: translateX(-50%) translateY(0) scale(1);
  }
  50% {
    transform: translateX(-50%) translateY(-15px) scale(1.05);
  }
}

/* 事件视界（黑洞中心） */
.event-horizon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #000 0%, #0a0e27 70%);
  box-shadow: 
    inset 0 0 40px rgba(0, 0, 0, 1),
    0 0 60px rgba(0, 0, 0, 0.8),
    0 0 100px rgba(0, 0, 0, 0.6);
  animation: eventHorizonPulse 4s ease-in-out infinite;
}

.event-horizon-1 {
  width: 45px;
  height: 45px;
}

.event-horizon-2 {
  width: 38px;
  height: 38px;
}

.event-horizon-3 {
  width: 50px;
  height: 50px;
}

@keyframes eventHorizonPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 
      inset 0 0 40px rgba(0, 0, 0, 1),
      0 0 60px rgba(0, 0, 0, 0.8),
      0 0 100px rgba(0, 0, 0, 0.6);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 
      inset 0 0 50px rgba(0, 0, 0, 1),
      0 0 80px rgba(0, 0, 0, 0.9),
      0 0 120px rgba(0, 0, 0, 0.7);
  }
}

/* 吸积盘（旋转发光环） */
.accretion-disk {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: blur(0.5px);
}

.accretion-disk-1 {
  width: 140px;
  height: 30px;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 87, 34, 0.3) 60deg,
    rgba(255, 152, 0, 0.6) 120deg,
    rgba(255, 235, 59, 0.8) 180deg,
    rgba(255, 152, 0, 0.6) 240deg,
    rgba(255, 87, 34, 0.3) 300deg,
    transparent 360deg
  );
  box-shadow: 
    0 0 30px rgba(255, 152, 0, 0.5),
    0 0 60px rgba(255, 87, 34, 0.3),
    inset 0 0 40px rgba(255, 235, 59, 0.2);
  animation: accretionRotate1 10s linear infinite;
}

.accretion-disk-2 {
  width: 120px;
  height: 25px;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(156, 39, 176, 0.3) 60deg,
    rgba(233, 30, 99, 0.6) 120deg,
    rgba(255, 64, 129, 0.8) 180deg,
    rgba(233, 30, 99, 0.6) 240deg,
    rgba(156, 39, 176, 0.3) 300deg,
    transparent 360deg
  );
  box-shadow: 
    0 0 25px rgba(233, 30, 99, 0.5),
    0 0 50px rgba(156, 39, 176, 0.3),
    inset 0 0 35px rgba(255, 64, 129, 0.2);
  animation: accretionRotate2 12s linear infinite reverse;
}

.accretion-disk-3 {
  width: 160px;
  height: 35px;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(0, 150, 255, 0.3) 60deg,
    rgba(3, 169, 244, 0.6) 120deg,
    rgba(79, 195, 247, 0.8) 180deg,
    rgba(3, 169, 244, 0.6) 240deg,
    rgba(0, 150, 255, 0.3) 300deg,
    transparent 360deg
  );
  box-shadow: 
    0 0 35px rgba(3, 169, 244, 0.5),
    0 0 70px rgba(0, 150, 255, 0.3),
    inset 0 0 45px rgba(79, 195, 247, 0.2);
  animation: accretionRotate3 14s linear infinite;
}

@keyframes accretionRotate1 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes accretionRotate2 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

@keyframes accretionRotate3 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* 引力透镜效果（背景扭曲） */
.lens-distortion {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  animation: lensDistort 6s ease-in-out infinite;
}

.lens-distortion-1 {
  width: 180px;
  height: 180px;
  background: radial-gradient(
    circle,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.1) 30%,
    rgba(0, 0, 0, 0.2) 50%,
    rgba(0, 0, 0, 0.1) 70%,
    transparent 100%
  );
  filter: blur(20px);
  animation: lensDistort1 8s ease-in-out infinite;
}

.lens-distortion-2 {
  width: 150px;
  height: 150px;
  background: radial-gradient(
    circle,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.15) 30%,
    rgba(0, 0, 0, 0.25) 50%,
    rgba(0, 0, 0, 0.15) 70%,
    transparent 100%
  );
  filter: blur(15px);
  animation: lensDistort2 10s ease-in-out infinite;
}

.lens-distortion-3 {
  width: 200px;
  height: 200px;
  background: radial-gradient(
    circle,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.12) 30%,
    rgba(0, 0, 0, 0.22) 50%,
    rgba(0, 0, 0, 0.12) 70%,
    transparent 100%
  );
  filter: blur(25px);
  animation: lensDistort3 12s ease-in-out infinite;
}

@keyframes lensDistort1 {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.15);
    opacity: 0.8;
  }
}

@keyframes lensDistort2 {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.7;
  }
}

@keyframes lensDistort3 {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.55;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.18);
    opacity: 0.75;
  }
}

/* 吸积盘外层光晕 */
.accretion-disk::before,
.accretion-disk::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.6;
}

.accretion-disk-1::before {
  width: 160px;
  height: 40px;
  background: radial-gradient(
    ellipse,
    transparent 40%,
    rgba(255, 152, 0, 0.2) 45%,
    rgba(255, 152, 0, 0.4) 50%,
    rgba(255, 152, 0, 0.2) 55%,
    transparent 60%
  );
  box-shadow: 0 0 20px rgba(255, 152, 0, 0.3);
  animation: accretionRotate1 15s linear infinite;
}

.accretion-disk-1::after {
  width: 100px;
  height: 20px;
  background: radial-gradient(
    ellipse,
    transparent 30%,
    rgba(255, 235, 59, 0.4) 40%,
    rgba(255, 235, 59, 0.6) 50%,
    rgba(255, 235, 59, 0.4) 60%,
    transparent 70%
  );
  box-shadow: 0 0 15px rgba(255, 235, 59, 0.5);
  animation: accretionRotate1 8s linear infinite reverse;
}

.accretion-disk-2::before {
  width: 140px;
  height: 35px;
  background: radial-gradient(
    ellipse,
    transparent 40%,
    rgba(233, 30, 99, 0.2) 45%,
    rgba(233, 30, 99, 0.4) 50%,
    rgba(233, 30, 99, 0.2) 55%,
    transparent 60%
  );
  box-shadow: 0 0 18px rgba(233, 30, 99, 0.3);
  animation: accretionRotate2 18s linear infinite;
}

.accretion-disk-2::after {
  width: 90px;
  height: 18px;
  background: radial-gradient(
    ellipse,
    transparent 30%,
    rgba(255, 64, 129, 0.4) 40%,
    rgba(255, 64, 129, 0.6) 50%,
    rgba(255, 64, 129, 0.4) 60%,
    transparent 70%
  );
  box-shadow: 0 0 12px rgba(255, 64, 129, 0.5);
  animation: accretionRotate2 9s linear infinite reverse;
}

.accretion-disk-3::before {
  width: 180px;
  height: 45px;
  background: radial-gradient(
    ellipse,
    transparent 40%,
    rgba(3, 169, 244, 0.2) 45%,
    rgba(3, 169, 244, 0.4) 50%,
    rgba(3, 169, 244, 0.2) 55%,
    transparent 60%
  );
  box-shadow: 0 0 22px rgba(3, 169, 244, 0.3);
  animation: accretionRotate3 20s linear infinite;
}

.accretion-disk-3::after {
  width: 110px;
  height: 22px;
  background: radial-gradient(
    ellipse,
    transparent 30%,
    rgba(79, 195, 247, 0.4) 40%,
    rgba(79, 195, 247, 0.6) 50%,
    rgba(79, 195, 247, 0.4) 60%,
    transparent 70%
  );
  box-shadow: 0 0 16px rgba(79, 195, 247, 0.5);
  animation: accretionRotate3 10s linear infinite reverse;
}

.login-container {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 440px;
  padding: 20px;
}

.login-panel {
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(30px);
  border: 1px solid rgba(64, 158, 255, 0.4);
  border-radius: 24px;
  box-shadow: 
    0 25px 80px rgba(0, 0, 0, 0.6),
    inset 0 0 80px rgba(64, 158, 255, 0.15),
    0 0 60px rgba(64, 158, 255, 0.3);
  padding: 45px;
  position: relative;
  overflow: hidden;
}

.login-panel::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(64, 158, 255, 0.15) 0%, transparent 70%);
  animation: panelGlow 10s ease-in-out infinite;
}

.login-panel::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(45deg, transparent 30%, rgba(64, 158, 255, 0.05) 50%, transparent 70%),
    linear-gradient(-45deg, transparent 30%, rgba(138, 43, 226, 0.05) 50%, transparent 70%);
  animation: panelShift 15s linear infinite;
  pointer-events: none;
}

@keyframes panelGlow {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

@keyframes panelShift {
  0% {
    background-position: 0 0, 0 0;
  }
  100% {
    background-position: 200px 200px, -200px 200px;
  }
}

.panel-header {
  text-align: center;
  margin-bottom: 32px;
  position: relative;
  z-index: 1;
}

.logo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.panel-header h2 {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  text-shadow: 
    0 0 30px rgba(64, 158, 255, 0.6),
    0 0 60px rgba(64, 158, 255, 0.3);
  letter-spacing: 3px;
  animation: titleGlow 5s ease-in-out infinite;
  position: relative;
}

@keyframes titleGlow {
  0%, 100% {
    text-shadow: 
      0 0 30px rgba(64, 158, 255, 0.6),
      0 0 60px rgba(64, 158, 255, 0.3);
  }
  50% {
    text-shadow: 
      0 0 40px rgba(64, 158, 255, 0.8),
      0 0 80px rgba(64, 158, 255, 0.5);
  }
}

.subtitle {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 15px;
  letter-spacing: 2px;
  animation: subtitleShimmer 7s ease-in-out infinite;
}

@keyframes subtitleShimmer {
  0%, 100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 10px rgba(64, 158, 255, 0.5);
  }
}

.login-form {
  margin-top: 24px;
  position: relative;
  z-index: 1;
}

.input-wrapper {
  position: relative;
  width: 100%;
}

.space-input {
  width: 100% !important;
}

.space-input :deep(.el-input__wrapper) {
  width: 100% !important;
  background-color: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(64, 158, 255, 0.4);
  border-radius: 12px;
  box-shadow: 
    inset 0 2px 6px rgba(0, 0, 0, 0.4),
    0 0 12px rgba(64, 158, 255, 0.15);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.space-input :deep(.el-input__wrapper::before) {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(64, 158, 255, 0.2), transparent);
  transition: left 0.6s;
}

.space-input :deep(.el-input__wrapper):hover {
  border-color: rgba(64, 158, 255, 0.6);
  box-shadow: 
    inset 0 2px 6px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(64, 158, 255, 0.4);
  transform: translateY(-2px);
}

.space-input :deep(.el-input__wrapper):hover::before {
  left: 100%;
}

.space-input :deep(.el-input__wrapper.is-focus) {
  border-color: #409eff;
  box-shadow: 
    inset 0 2px 6px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(64, 158, 255, 0.6);
  transform: translateY(-2px);
}

.space-input :deep(.el-input__inner) {
  color: #fff;
}

.space-input :deep(.el-input__inner::placeholder) {
  color: rgba(255, 255, 255, 0.5);
}

.space-input :deep(.el-input__prefix) {
  color: rgba(255, 255, 255, 0.7);
}

:deep(.el-checkbox__label) {
  color: rgba(255, 255, 255, 0.8);
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.forgot-link {
  color: rgba(64, 158, 255, 0.9);
  text-shadow: 0 0 10px rgba(64, 158, 255, 0.5);
}

.space-btn {
  border-radius: 12px;
  font-weight: 600;
  height: 52px;
  font-size: 17px;
  background: linear-gradient(135deg, #409eff 0%, #66b1ff 50%, #85c1ff 100%);
  border: none;
  box-shadow: 
    0 6px 20px rgba(64, 158, 255, 0.5),
    0 0 30px rgba(64, 158, 255, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.2),
    inset 0 -2px 4px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.space-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.6s;
  z-index: 1;
}

.space-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 2px;
  background: linear-gradient(135deg, rgba(64, 158, 255, 0.6), rgba(138, 43, 226, 0.4));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s;
}

.space-btn:hover::before {
  left: 100%;
}

.space-btn:hover::after {
  opacity: 1;
}

.space-btn:hover {
  background: linear-gradient(135deg, #66b1ff 0%, #409eff 50%, #66b1ff 100%);
  box-shadow: 
    0 8px 30px rgba(64, 158, 255, 0.7),
    0 0 50px rgba(64, 158, 255, 0.5),
    inset 0 2px 4px rgba(255, 255, 255, 0.3),
    inset 0 -2px 4px rgba(0, 0, 0, 0.2);
  transform: translateY(-3px) scale(1.02);
  animation: btnGlow 2s ease-in-out infinite;
}

.space-btn:active {
  transform: translateY(-1px) scale(0.98);
}

@keyframes btnGlow {
  0%, 100% {
    box-shadow: 
      0 8px 30px rgba(64, 158, 255, 0.7),
      0 0 50px rgba(64, 158, 255, 0.5),
      inset 0 2px 4px rgba(255, 255, 255, 0.3),
      inset 0 -2px 4px rgba(0, 0, 0, 0.2);
  }
  50% {
    box-shadow: 
      0 8px 35px rgba(64, 158, 255, 0.8),
      0 0 60px rgba(64, 158, 255, 0.6),
      inset 0 2px 4px rgba(255, 255, 255, 0.3),
      inset 0 -2px 4px rgba(0, 0, 0, 0.2);
  }
}

.space-btn span {
  position: relative;
  z-index: 1;
}

.panel-footer {
  text-align: center;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(64, 158, 255, 0.2);
  position: relative;
  z-index: 1;
}

.panel-footer p {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
}
</style>

